<template>
  <!-- 投诉建议弹窗 -->
  <div class="complain-pop" id="complainPop">
    <div class="complain-pop-content">
      <img
        src="//image.zlketang.com/public/news/images/guanwangPic/close_complain_pop.png"
        alt=""
        class="close-complain-pop"
        @click="closeComplainPop"
      />
      <div class="complain-pop-title">投诉/意见反馈</div>
      <template v-if="!isMyFeedback">
        <div class="complain-pop-question-list">
          <div class="complain-pop-question-list-title">
            <span style="color:#E13723;padding-right: 4px;">*</span>
            问题分类：
          </div>
          <div class="complain-pop-question-list-content">
            <el-checkbox-group v-model="checkedCities">
              <el-radio
                v-model="radioChoose"
                :label="item.id"
                v-for="item in species"
                :key="item.id"
                @change="changeChoose(item)"
              >
                {{ item.name }}
              </el-radio>
            </el-checkbox-group>
          </div>
        </div>
        <div
          class="complain-pop-question-child"
          v-if="
            Array.isArray(currentType.childs) && currentType.childs.length > 0
          "
        >
          <div class="complain-pop-question-list-title">
            <span style="color:#E13723;padding-right: 4px;">*</span>
            {{ currentType.name + '类型' }}：
          </div>
          <div class="complain-pop-question-list-content-2">
            <el-checkbox-group v-model="checkedTypes">
              <el-radio
                v-model="radioType"
                :label="item.id"
                v-for="item in currentType.childs"
                :key="item.id"
                @change="changeChooseType(item)"
              >
                {{ item.name }}
              </el-radio>
            </el-checkbox-group>
          </div>
        </div>
        <div
          class="complain-pop-question-child"
          v-show="+currentChildType.choose_subject === 1"
        >
          <div class="complain-pop-question-list-title lh40">
            <span style="color:#E13723;padding-right: 4px;">*</span>
            课程专业：
          </div>
          <div class="complain-pop-question-list-content">
            <!-- <el-select :popper-append-to-body="true" v-model="subjectId" placeholder="-省/直辖市-">
              <el-option v-for="item in subjectTree" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select> -->
            <el-cascader
              :append-to-body="false"
              class="cascader-width"
              v-model="subjectId"
              :options="subjectTree"
              :props="props"
              placeholder="选择课程所在专业、科目"
            ></el-cascader>
          </div>
        </div>
        <div class="complain-pop-question-text">
          <div class="complain-pop-question-list-title">
            <span style="color:#E13723;padding-right: 4px;">*</span>
            问题描述：
          </div>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            class="complain-pop-question-text-content"
            placeholder="描述您遇到的问题，配合截图会更好。恳请留下联系方式，方便我们联系您处理问题。"
            v-model="txtInfo"
          ></textarea>
        </div>
        <div class="complain-pop-question-img">
          <div class="complain-pop-question-list-title">上传图片：</div>
          <div class="complain-pop-el-upload-box">
            <el-upload
              :on-change="changeImg"
              ref="uploadImgBox"
              :multiple="true"
              action="/wxpub/solution/upload_img"
              :auto-upload="false"
              list-type="picture-card"
            >
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </div>
        </div>
        <div
          class="send-complain-btn"
          @click="submitBtn"
          :class="
            isAllFilled.isActive
              ? 'send-complain-btn-current'
              : 'send-complain-btn-default'
          "
        >
          提交
        </div>
        <div class="is-my-feedback" @click="toMyFeedback">我的反馈</div>
      </template>
      <template v-if="isMyFeedback">
        <div style="text-align: initial;padding: 20px;">
          <div v-if="hasFeedbackList">
            <div class="mb10">
              <div class="my-feedback-step">
                <div>
                  <div class="inline-box">
                    <img
                      class="my-feedback-step-img"
                      :src="
                        +feedbackList[currentIndex].status === 0
                          ? feedbackList[currentIndex].statusList[0].active_img
                          : feedbackList[currentIndex].statusList[0].normal_img
                      "
                      alt="已提交"
                    />
                    <div
                      class="my-feedback-step-p"
                      :style="
                        +feedbackList[currentIndex].status === 0
                          ? feedbackList[currentIndex].statusList[0]
                              .active_color
                          : feedbackList[currentIndex].statusList[0]
                              .normal_color
                      "
                    >
                      已提交
                    </div>
                  </div>
                  <div class="inline-box set-dash-line"></div>
                  <div class="inline-box">
                    <img
                      class="my-feedback-step-img"
                      :src="
                        +feedbackList[currentIndex].status === 1
                          ? feedbackList[currentIndex].statusList[1].active_img
                          : feedbackList[currentIndex].statusList[1].normal_img
                      "
                      alt="处理中"
                    />
                    <div
                      class="my-feedback-step-p"
                      :style="
                        +feedbackList[currentIndex].status === 1
                          ? feedbackList[currentIndex].statusList[1]
                              .active_color
                          : feedbackList[currentIndex].statusList[1]
                              .normal_color
                      "
                    >
                      处理中
                    </div>
                  </div>

                  <div class="inline-box set-dash-line"></div>

                  <div class="inline-box">
                    <img
                      class="my-feedback-step-img"
                      :src="
                        +feedbackList[currentIndex].status === 3
                          ? feedbackList[currentIndex].statusList[2].active_img
                          : feedbackList[currentIndex].statusList[2].normal_img
                      "
                      alt="已处理"
                    />
                    <div
                      class="my-feedback-step-p"
                      :style="
                        +feedbackList[currentIndex].status === 3
                          ? feedbackList[currentIndex].statusList[2]
                              .active_color
                          : feedbackList[currentIndex].statusList[2]
                              .normal_color
                      "
                    >
                      已处理
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="myfeedback-main mb10">
              <div class="myfeedback-main-question mb16">
                <div class="myfeedback-main-title mb10">
                  <div class="myfeedback-main-title-left">
                    <div class="myfeedback-main-title-left-blue"></div>

                    <div class="myfeedback-main-title-left-title">
                      问题内容：
                    </div>
                  </div>

                  <div class="myfeedback-main-title-right">
                    {{ feedbackList[currentIndex].create_time || '' }}
                  </div>
                </div>

                <div class="myfeedback-main-question-center mb10">
                  {{ feedbackList[currentIndex].content || '' }}
                </div>

                <div
                  class="myfeedback-main-question-box"
                  v-if="
                    Array.isArray(feedbackList[currentIndex].imgs) &&
                      feedbackList[currentIndex].imgs.length > 0
                  "
                >
                  <img
                    class="myfeedback-main-question-box-img"
                    v-for="(vItem, vIndex) in feedbackList[currentIndex].imgs"
                    :key="vIndex"
                    :src="parseResourceUrl(vItem)"
                  />
                </div>
              </div>

              <div v-if="+feedbackList[currentIndex].status === 3">
                <div class="mb16">
                  <div class="myfeedback-main-title mb10">
                    <div class="myfeedback-main-title-left">
                      <div class="myfeedback-main-title-left-blue"></div>

                      <div class="myfeedback-main-title-left-title">回复：</div>
                    </div>

                    <div class="myfeedback-main-title-right">
                      {{ feedbackList[currentIndex].reply_time || '' }}
                    </div>
                  </div>
                  <div class="myfeedback-main-question-center mb10">
                    {{ feedbackList[currentIndex].reply || '' }}
                  </div>
                </div>

                <div>
                  <div class="myfeedback-main-title mb10">
                    <div class="myfeedback-main-title-left">
                      <div class="myfeedback-main-title-left-blue"></div>

                      <div class="myfeedback-main-title-left-title">
                        你对本次的处理结果还满意吗？
                      </div>
                    </div>

                    <div class="myfeedback-main-title-right"></div>
                  </div>
                  <div class="myfeedback-main-score">
                    <div
                      v-for="(kItem, kIndex) in feedbackList[currentIndex]
                        .feedback_img"
                      :key="kIndex"
                      @click="changeStatus(feedbackList[currentIndex], kIndex)"
                      style="cursor: pointer;"
                    >
                      <img
                        class="myfeedback-main-score-img"
                        :src="kItem.isClick ? kItem.active_icon : kItem.icon"
                      />
                      <p
                        class="myfeedback-main-score-p"
                        :class="
                          kItem.isClick
                            ? 'myfeedback-main-score-p-active'
                            : 'myfeedback-main-score-p-default'
                        "
                      >
                        {{ kItem.title }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!hasFeedbackList" class="myfeedback-main-empty">
            <img
              src="//image.zlketang.com/public/news/images/feedback/feedback_empty.png"
              style="width: 160px;height:160px;"
              alt="空状态"
            />
            <p class="myfeedback-main-empty-p">之了珍藏您的每一条反馈</p>
          </div>
        </div>
      </template>
      <template v-if="isMyFeedback && hasFeedbackList">
        <div
          style="display: flex;justify-content: center;"
          v-if="
            +feedbackList[currentIndex].is_submit === 0 &&
              +feedbackList[currentIndex].status === 3
          "
        >
          <div
            class="send-complain-btn send-complain-btn-current"
            @click="toAppraise(feedbackList[currentIndex])"
          >
            提交评价
          </div>
        </div>
        <div
          class="online-feedback-footer-pagination"
          v-if="feedback_total > 1"
        >
          <el-pagination
            :page-size="1"
            background
            layout="prev, pager, next"
            :total="feedback_total"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </template>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getComplains,
  postComplains,
  getMyComplains,
  postComments,
  getSubjectTree,
  uploadImg
} from '@/api/common_apis'
export default {
  data() {
    return {
      // 投诉建议弹窗
      checkedCities: [],
      checkedTypes: [],
      txtInfo: '',
      disabled: false,
      // 投诉建议分类
      species: [],
      //上传图片本地存储
      showImgsLine: [],
      //已上传图片的地址值
      submitImgsUrlArr: [],
      imgsUrl: [],
      // 预览图片地址
      dialogImageUrl: '',
      // 预览图片弹窗
      dialogVisible: false,
      // 单选框选择内容
      radioChoose: '',
      // 问题类型子选择内容
      radioType: '',
      isAllFilled: {
        isClick: false,
        isInput: false,
        isActive: false
      },
      currentType: {}, // 当前问题分类
      currentChildType: {}, // 当前问题子类
      subjectTree: [],
      props: {
        // lazy: true,
        children: 'child',
        label: 'name',
        value: 'id'
      },
      subjectId: '',
      isMyFeedback: false,
      // 反馈列表
      feedbackList: [],
      // 判断是否存在反馈
      hasFeedbackList: false,
      feedbackVisible: false,
      feedback_total: 0,
      feedback_img: [
        {
          icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_bad.png',
          active_icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_bad_active.png',
          isClick: false,
          title: '很糟糕',
          status: 1
        },
        {
          icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_normal.png',
          active_icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_normal_active.png',
          isClick: false,
          title: '一般般',
          status: 2
        },
        {
          icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_good.png',
          active_icon:
            '//image.zlketang.com/public/news/images/feedback/feedback_good_active.png',
          isClick: false,
          title: '太赞了',
          status: 3
        }
      ],
      statusList: [
        {
          active_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_one_active.png',
          normal_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_one.png',
          active_color: 'color: #3480FF;',
          normal_color: 'color: #8C8C8C;'
        },
        {
          active_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_two_active.png',
          normal_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_two.png',
          active_color: 'color: #3480FF;',
          normal_color: 'color: #8C8C8C;'
        },
        {
          active_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_three_active.png',
          normal_img:
            '//image.zlketang.com/public/news/images/feedback/feedback_three.png',
          active_color: 'color: #3480FF;',
          normal_color: 'color: #8C8C8C;'
        }
      ],
      // 当前页数
      currentIndex: 0
    }
  },
  methods: {
    // 获取投诉分类
    async getComplains() {
      if (Array.isArray(this.subjectTree) && this.subjectTree.length === 0) {
        getSubjectTree()
          .then(res => {
            // this.subjectTree = res.data.list.map(item=>{return {id: item.id,name: item.name}})
            this.subjectTree =
              res.data && Array.isArray(res.data.list) ? res.data.list : []
          })
          .catch(err => {})
      }
      let { data, errcode, errmsg } = await getComplains({})
      if (+errcode === 0) {
        this.species = data
      }
    },
    // 关闭投诉建议弹窗
    closeComplainPop() {
      if (this.isMyFeedback) {
        ;(this.feedback_title = '投诉/意见反馈'),
          (this.isMyFeedback = !this.isMyFeedback)
        return
      }
      let _this = this
      _this
        .$confirm('确定要放弃本次编辑退出吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          this.$emit('closeComplain', false)
          // let complainItem = document.getElementById('complainItem')
          // complainPop.style.display = 'none'
          // _this.feedbackList = []
          // _this.radioChoose = ''
          // _this.txtInfo = ''
          // _this.imgsUrl = []
          // _this.showImgsLine = []
          // _this.$refs['uploadImgBox'].clearFiles()
        })
        .catch(() => {
          this.$message({
            message: '已取消',
            type: 'info'
          })
        })
    },
    changeImg(file, fileList) {
      let len = fileList.length
      //对图片大小、类型校验
      let reg = /^image\/(jpeg|JPEG|jpg|JPG|png|PNG|gif|GIF)$/
      if (!reg.test(file.raw.type)) {
        this.$message({
          message: '图片格式不符合要求，请重新上传！',
          type: 'error'
        })
        this.$refs.uploadImgBox.uploadFiles.splice(len - 1, 1)
        return
      }

      if (file.raw.size > 500000) {
        this.$message({
          message: '图片过大，请重新上传！',
          type: 'error'
        })
        this.$refs.uploadImgBox.uploadFiles.splice(len - 1, 1)
        return
      }
      if (fileList.length > 6) {
        this.$message({
          message: '最多上传6张图片！',
          type: 'error'
        })
        this.$refs.uploadImgBox.uploadFiles.splice(len - 1, 1)
        return
      }
      this.showImgsLine = fileList
      this.imgsUrl = []
      this.showImgsLine.forEach((item, index) => {
        this.imgsUrl.push(item.url)
      })
    },
    handleRemove(file) {
      let _this = this
      _this
        .$confirm('确定要删除该图片吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          let id
          this.showImgsLine.forEach((item, index) => {
            if (item.url === file.url) {
              id = index
              this.showImgsLine.splice(index, 1)
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            }
            this.imgsUrl.push(item.url)
          })
        })
        .catch(() => {
          this.$message({
            message: '已取消',
            type: 'info'
          })
        })
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 获取单选框选择内容
    changeChoose(item) {
      let { id } = item
      if (!this.isAllFilled.isClick) {
        this.isAllFilled.isClick = true
      }
      this.isAllFilled.isActive =
        this.isAllFilled.isClick && this.isAllFilled.isInput
      this.currentType = item
      this.currentChildType = ''
      this.radioType = ''
      this.subjectId = ''
      this.radioChoose = id
    },
    // 获取单选框选择内容
    changeChooseType(item) {
      let { id } = item
      this.subjectId = ''
      this.currentChildType = item
      // this.currentType = item
      this.radioType = id
    },
    submitBtn() {
      if (!this.isAllFilled.isActive) {
        this.$message({
          type: 'error',
          message: '请输入反馈内容'
        })
        return
      }
      if (!this.radioChoose) {
        this.$message({
          message: '请选择问题分类',
          type: 'error'
        })
        return
      }
      if (
        this.currentType &&
        Array.isArray(this.currentType.childs) &&
        this.currentType.childs.length > 0 &&
        !this.radioType
      ) {
        this.$message({
          message: '请选择问题类型',
          type: 'error'
        })
        return
      }
      if (
        this.currentType &&
        +this.currentType.choose_subject === 1 &&
        !this.subjectId
      ) {
        this.$message({
          message: '请选择课程专业',
          type: 'error'
        })
        return
      }
      if (
        this.currentChildType &&
        +this.currentChildType.choose_subject === 1 &&
        !this.subjectId
      ) {
        this.$message({
          message: '请选择课程专业',
          type: 'error'
        })
        return
      }
      if (this.txtInfo.length < 5) {
        this.$message({
          message: '温馨提示！问题反馈的字数不能小于5',
          type: 'error'
        })
        return
      }
      if (this.txtInfo.length > 512) {
        this.$message({
          message: '温馨提示！问题反馈的字数不能大于512',
          type: 'error'
        })
        return
      }
      this.disabled = true
      this.uploadImgs()
    },
    // 最终提交
    submitQuestionApi(imgUrlStr) {
      let param = {}
      if (imgUrlStr) {
        param = {
          classify_id: this.radioType || this.radioChoose,
          content: this.txtInfo,
          imgs: imgUrlStr,
          from: 'web'
        }
      } else {
        param = {
          classify_id: this.radioType || this.radioChoose,
          content: this.txtInfo,
          from: 'web'
        }
      }
      if (Array.isArray(this.subjectId) && this.subjectId.length === 3) {
        param.subject_id = this.subjectId[2]
      }
      let _this = this
      postComplains(param).then(function(res) {
        _this.disabled = false
        if (res.errcode !== 0) {
          _this.$message({
            message: res.errmsg,
            type: 'error'
          })
          return
        }
        document.body.style.overflow = 'auto'
        _this.visible = false
        _this.radioChoose = ''
        _this.txtInfo = ''
        _this.imgsUrl = []
        _this.subjectId = ''
        _this.currentChildType = ''
        _this.showImgsLine = []
        _this.submitImgsUrlArr = []
        _this.$refs['uploadImgBox'].clearFiles()
        _this.$message({
          message: '提交成功，感谢您的反馈！',
          type: 'success'
        })
        _this.$emit('closeComplain', false)
      })
      // $.ajax({
      //   url: '/wxpub/api/suggestion',
      //   type: 'POST',
      //   data: param,
      //   success: function (res) {
      //     _this.disabled = false
      //     if (res.errcode !== 0) {
      //       _this.$message({
      //         message: res.errmsg,
      //         type: 'error'
      //       })
      //       return
      //     }
      //     document.body.style.overflow = 'auto'
      //     _this.visible = false
      //     _this.radioChoose = ''
      //     _this.txtInfo = ''
      //     _this.imgsUrl = []
      //     _this.showImgsLine = []
      //     _this.$refs['uploadImgBox'].clearFiles()
      //     _this.$message({
      //       message: '提交成功，感谢您的反馈！',
      //       type: 'success'
      //     })
      //   }
      // })
    },
    uploadImgs() {
      let that = this
      let errorImgInfoLen, imgUrlStr
      let errorImgInfo = []
      let errorImgIndex = []
      let successCount = 0
      let uploadImgArr =
        this.showImgsLine.filter(function(item) {
          //找到需要上传的图片信息
          return !item.isUploadSuccess
        }) || []
      let uploadImgsLen = uploadImgArr.length
      let hasUploadImgsLength = this.showImgsLine.length - uploadImgsLen //当前已上传成功的图片个数
      //当前没有需要上传的图片，则直接提交问题
      if (uploadImgsLen === 0) {
        imgUrlStr = ''
        this.submitQuestionApi(imgUrlStr)
        return
      }
      if (uploadImgArr && uploadImgsLen !== 0) {
        uploadImgArr.forEach(function(item, index) {
          //上传图片所需参数
          var imgObj = new FormData()
          imgObj.append('from', 'app')
          imgObj.append('images', item.raw)

          that
            .ajaxUpload('/wxpub/solution/upload_img', imgObj)
            .then(function(res) {
              successCount++
              that.submitImgsUrlArr.push(res.url)
              that.$set(
                that.showImgsLine[hasUploadImgsLength + index],
                'isUploadSuccess',
                true
              ) //加上字段，用户不能删除已上传成功图片
              if (successCount === uploadImgsLen) {
                //当次上传图片全部成功，则调用提交问题接口
                imgUrlStr = that.submitImgsUrlArr
                that.submitQuestionApi(imgUrlStr)
              }
              errorImgInfoLen = errorImgInfo.length
              if (
                errorImgInfoLen > 0 &&
                errorImgInfoLen + successCount === uploadImgsLen
              ) {
                //所有图片上传接口调用之后
                //上传失败的图片index，排序后在图片队列中删除
                errorImgIndex.sort(function(a, b) {
                  return b - a
                })
                for (var i = 0; i < errorImgInfoLen; i++) {
                  that.showImgsLine.splice(errorImgIndex[i], 1)
                }
                var errstr = errorImgInfo.join(',</br>')

                //统一提示错误信息
                that.$message({
                  dangerouslyUseHTMLString: true,
                  message:
                    "<div style='line-height:20px;'><p>图片上传失败，失败图片已从队列删除，错误信息：</p>" +
                    errstr +
                    '<p>请重新上传并提交问题！</p></div>',
                  type: 'warning',
                  duration: 10000
                })
                this.disabled = false
              }
            })
            .catch(function(err) {
              //保存上传失败图片的报错信息以及index
              errorImgIndex.push(hasUploadImgsLength + index)
              errorImgInfo.push(err.errmsg)
              errorImgInfoLen = errorImgInfo.length
              if (
                errorImgInfoLen > 0 &&
                errorImgInfoLen + successCount === uploadImgsLen
              ) {
                errorImgIndex.sort(function(a, b) {
                  return b - a
                })
                for (var i = 0; i < errorImgInfoLen; i++) {
                  that.showImgsLine.splice(errorImgIndex[i], 1)
                }
                var errstr = errorImgInfo.join(',</br>')
                //统一提示错误信息
                that.$message({
                  dangerouslyUseHTMLString: true,
                  message:
                    "<div style='line-height:20px;'><p>图片上传失败，失败图片已从队列删除，错误信息：</p>" +
                    errstr +
                    '<p>请重新上传并提交问题！</p></div>',
                  type: 'warning',
                  duration: 10000
                })
              }
              this.disabled = false
            })
        })
      }
    },
    // 我的反馈
    toMyFeedback() {
      this.getMyfeedback()
      this.isMyFeedback = true
    },
    // 获取 我的反馈
    getMyfeedback() {
      let _this = this
      getMyComplains({})
        .then(function(res) {
          _this.feedbackList = JSON.parse(JSON.stringify(res.data.list)) || []
          _this.hasFeedbackList = _this.feedbackList.length === 0 ? false : true
          _this.feedback_total = res.data.list.length || 0
          let copy_imgs = JSON.parse(JSON.stringify(_this.feedback_img))

          if (_this.feedbackList.length > 0) {
            _this.feedbackList.forEach(item => {
              item.statusList = _this.statusList
              item.feedback_img = JSON.parse(JSON.stringify(copy_imgs))
              if (+item.comment_status !== 0 && +item.status === 3) {
                item.feedback_img[+item.comment_status - 1].isClick = true
              }
            })
          }
        })
        .catch(function(e) {
          _this.feedbackList = []
          _this.feedback_total = 0
          _this.hasFeedbackList = false
        })
      // $.ajax({
      //   url: '/wxpub/suggestion/my_suggestion?from=web',
      //   type: 'GET',
      //   success: function (res) {
      //     _this.feedbackList = JSON.parse(JSON.stringify(res.data.list)) || []
      //     _this.hasFeedbackList = _this.feedbackList.length === 0 ? false : true
      //     _this.feedback_total = res.data.list.length || 0
      //     let copy_imgs = JSON.parse(JSON.stringify(_this.feedback_img))

      //     if (_this.feedbackList.length > 0) {
      //       _this.feedbackList.forEach(item => {
      //         item.statusList = _this.statusList
      //         item.feedback_img = JSON.parse(JSON.stringify(copy_imgs))
      //         if (+item.comment_status !== 0 && +item.status === 3) {
      //           item.feedback_img[(+item.comment_status - 1)].isClick = true
      //         }
      //       })
      //     }
      //   },
      //   error: function (err) {
      //     _this.feedbackList = []
      //     _this.feedback_total = 0
      //     _this.hasFeedbackList = false
      //   }
      // })
    },
    //修改评价状态
    changeStatus(item, index) {
      if (+item.is_submit === 1) {
        // 已经评价了
        return
      }
      item.feedback_img.forEach((v, i) => {
        v.isClick = +i === +index ? !v.isClick : false
      })
      // 强制视图刷新
      this.$forceUpdate()
    },
    // 分页改变
    currentChange(val) {
      this.currentIndex = val - 1
    },
    // 提交评价
    toAppraise(item) {
      let comment_status = item.feedback_img.findIndex(v => v.isClick === true)
      if (+comment_status === -1) {
        this.$message({
          message: '请选择评分~',
          type: 'warning'
        })
        return
      }
      if (!item.id) return
      let data = {
        id: item.id,
        comment_status: item.feedback_img[comment_status].status,
        from: 'web'
      }
      this.submitPraise(data)
    },
    // 提交评价
    submitPraise(data) {
      let _this = this
      postComments(data)
        .then(function(res) {
          _this.isMyFeedback = false
          _this.getMyfeedback()
          _this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success'
          })
        })
        .catch(function(e) {
          _this.isMyFeedback = false
        })
      // $.ajax({
      //   url: '/wxpub/suggestion/submit_comment',
      //   type: 'POST',
      //   data: data,
      //   success: function (res) {
      //     _this.isMyFeedback = false
      //     _this.getMyfeedback()
      //     _this.$message({
      //       showClose: true,
      //       message: '提交成功',
      //       type: 'success'
      //     })
      //   },
      //   error: function (err) {
      //     _this.isMyFeedback = false
      //   }
      // })
    }
  },
  mounted() {
    this.getComplains()
  },
  watch: {
    txtInfo: {
      handler(newVal, oldVal) {
        if (this.txtInfo === '') {
          this.isAllFilled.isInput = false
          this.isAllFilled.isActive =
            this.isAllFilled.isClick && this.isAllFilled.isInput
          return
        }
        this.isAllFilled.isInput = true
        this.isAllFilled.isActive =
          this.isAllFilled.isClick && this.isAllFilled.isInput
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.lh40 {
  line-height: 40px;
}
.cascader-width {
  width: 490px;
}
.complain-pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2010;
}
.complain-pop-content {
  position: relative;
  margin: 15vh auto 0;
  /* position: absolute; */
  /* top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); */
  padding: 12px 0 18px;
  width: 640px;
  background: #ffffff;
  border-radius: 16px;
}

.close-complain-pop {
  position: absolute;
  top: 10px;
  right: 24px;
  display: block;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.complain-pop-title {
  padding: 12px 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  border-bottom: 1px solid #f5f5f5;
}

.complain-pop-question-list,
.complain-pop-question-text,
.complain-pop-question-img,
.complain-pop-question-child {
  box-sizing: border-box;
  margin-top: 24px;
  padding-left: 24px;
  width: 100%;
  min-height: 22px;
}

.complain-pop-question-text {
  margin-top: 16px;
  height: 200px;
}
.complain-pop-question-child {
  margin-top: 16px;
}
.complain-pop-question-img {
  box-sizing: border-box;
  margin-top: 32px;
  padding-left: 36px;
  height: auto;
  width: 640px;
}

.complain-pop-question-list-title {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.complain-pop-question-list-content {
  display: inline-block;
  margin-left: 8px;
  width: 490px;
  height: 100%;
  line-height: 22px;
}
.complain-pop-question-list-content-2 {
  display: inline-block;
  margin-left: 8px;
  width: 479px;
  height: 100%;
  line-height: 22px;
}

.complain-pop-question-list-item {
  display: inline-block;
  margin-right: 24px;
  height: 100%;
  width: 84px;
}

.complain-pop-question-list-item:last-child {
  margin-right: 0;
  width: 56px;
}

.complain-pop .el-checkbox {
  font-weight: 400;
  color: #333333;
}

.complain-pop-question-text-content {
  box-sizing: border-box;
  margin-left: 8px;
  display: inline-block;
  width: 490px;
  height: 200px;
  padding: 16px;
  resize: none;
  font-size: 16px;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
}

.complain-pop-question-text-content::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #d8d8d8;
  line-height: 22px;
}

.complain-pop /deep/ .el-upload--picture-card,
.complain-pop-choose-img,
.complain-pop /deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 88px !important;
  height: 88px !important;
}

.complain-pop /deep/ .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
}

.complain-pop /deep/ .el-upload {
  border: none !important;
  background-image: url('//image.zlketang.com/public/news/images/guanwangPic/up-img-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

.complain-pop-el-upload-box {
  display: inline-block;
  margin-left: 8px;
  width: 490px;
  height: auto;
}

.send-complain-btn {
  margin: 12px auto;
  width: 240px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
}

.send-complain-btn-default {
  background: #d6ebff;
}

.send-complain-btn-current {
  background: #3480ff;
}

.complain-pop /deep/ .el-radio__inner {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
}

.complain-pop /deep/ .el-checkbox + /deep/ .el-checkbox {
  margin-left: 0 !important;
}

.is-my-feedback {
  margin: 0 auto;
  width: 64px;
  font-size: 16px;
  font-weight: 400;
  color: #3480ff;
  border-bottom: 1px solid #3480ff;
  cursor: pointer;
}

/* /deep/ .complain-pop .el-dialog__wrapper {
  z-index: 9999999 !important;
  background: rgba(0, 0, 0, .5) !important;
} */

.complain-pop /deep/ .el-radio {
  margin-bottom: 16px !important;
}

.complain-pop /deep/ .el-radio__label {
  font-size: 16px !important;
}

.myfeedback-main-title {
  height: 22px;
  line-height: 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.myfeedback-main-title-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.myfeedback-main-title-left-blue {
  vertical-align: middle;
  display: inline-block;
  width: 4px;
  height: 16px;
  background: #3480ff;
}

.myfeedback-main-title-left-title {
  margin-left: 8px;
  display: inline-block;
  height: 22px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.myfeedback-main-title-right {
  font-size: 14px;
  font-weight: 400;
  color: #8c8c8c;
}

.myfeedback-main-question-center {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}

.myfeedback-main-question-box-img {
  display: inline-block;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  margin-right: 7px;
}

.myfeedback-main-score {
  width: 328px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}

.myfeedback-main-score-img {
  width: 80px;
  height: 80px;
  background-size: cover;
}

.online-feedback-footer-pagination {
  margin-top: 12px;
  text-align: center;
}

.myfeedback-main-score-p {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}

.myfeedback-main-score-p-default {
  color: #8c8c8c;
}

.myfeedback-main-score-p-active {
  color: #3480ff;
}

.myfeedback-main-empty {
  margin-top: 64px;
  text-align: center;
}

.myfeedback-main-empty-p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #bfbfbf;
}

.my-feedback-step {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 28px;
}

.my-feedback-step-img {
  width: 24px;
  height: 24px;
}

.my-feedback-step-p {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
}

.set-dash-line {
  margin-bottom: 26px;
  width: 167px;
  height: 2px;
  border: 1px dashed #979797;
}

.inline-box {
  display: inline-block;
  text-align: center;
}

.mb16 {
  margin-bottom: 16px;
}

.mb10 {
  margin-bottom: 10px;
}
.complain-ico {
  width: 24px;
  height: 24px;
}
textarea {
  outline: 0;
}
</style>
